import { ProCard, ProForm, ProFormRadio, ProFormText } from "@ant-design/pro-components"
import { Col, Row, Tree } from "antd";

const App:React.FC=()=>{

      const treeNode=[
        {
            key:'0',
            title:'出入库类型',
            children:[
                {
                    key:'01',
                    title:'入库',
                    children:[
                        {key:'0101',title:'采购入库'},
                        {key:'0102',title:'归还入库'},
                        {key:'0103',title:'特种设备检验入库'},
                        {key:'0104',title:'其他入库'},
                    ],
                },
                {
                    key:'02',
                    title:'出库',
                    children:[
                        {key:'0201',title:'采购退货'},
                        {key:'0202',title:'借用出库'},
                        {key:'0203',title:'特种设备送检出库'},
                        {key:'0204',title:'生产领料出库'},
                        {key:'0205',title:'其他出库'},
                    ],
                },
                 
            ]
        },
      ];

    return <>
       <ProCard title='出入库类型' style={{height:700}} 
       >
        <Row gutter={8}>
            <Col span={6}>
                <ProCard bordered style={{height:600}}>
                 <Tree treeData={treeNode} defaultExpandAll/>
                 </ProCard>
            </Col>
            <Col span={18}>
            <ProCard bordered  style={{height:600}}>
               <ProForm labelAlign="left" layout="horizontal" labelCol={{span:3,offset:0}} submitter={false}
                   style={{marginLeft:50}}
               >
                  <ProFormText name='f1' label='编码'  width={200}/>
                  <ProFormText name='f2' label='名称'  width={200}/>
                  <ProFormRadio.Group name='f6' label='出入库方向'  width={200}
                     options={[{value:1,label:'入库'},{value:2,label:'出库'}]}
                  />
                  <ProFormRadio.Group name='f5' label='状态'  width={200}
                     options={[{value:1,label:'正常'},{value:2,label:'冻结'},{value:3,label:'删除'}]}
                  />
                  <ProFormText name='f3' label='创建日期'  width={200}/>
                  <ProFormText name='f4' label='创建人'  width={200}/>
               </ProForm>
               </ProCard>
            </Col>
        </Row>

         

       </ProCard>
    </>;
};

export default App;